<template>
    <div>
      <Row class="bench_search">
        <Col span="5" offset="1">
          <span>姓名：</span>
          <Input style="width: 70%;" v-model="name"/>
        </Col>
        <Col span="6">
          <span>身份证号：</span>
          <Input style="width: 70%;" v-model="idcard" />
        </Col>
        <Button type="info"  @click="select" ><Icon type="ios-search" /> 搜索</Button>
        <Button type="info"  style="margin-left: 3%" @click="kai"><Icon type="ios-search" /> 添加</Button>
      </Row>
      <Table border :columns="columns12" :data="data6" style="margin-top: 30px">
        <template slot-scope="{ row }" slot="name">
          <strong>{{ row.name }}</strong>
        </template>
        <template slot-scope="{ row, index }" slot="action">
          <Button type="primary" size="small" style="margin-right: 5px" @click="show(index)">详情</Button>
          <Button type="primary" size="small" style="margin-right: 5px" @click="bianji(row)">编辑</Button>
          <Button type="error" size="small" @click="remove(index)">删除</Button>
        </template>
      </Table>
      <Page :total="100" style="float: right" />
      <Modal
        width="700px"
        v-model="modal1"
        title="添加信息"
        @on-ok="ok">
        <Row class="rowone">
          <Col span="10" offset="2">
            <span>姓名：</span>
            <Input style="width: 70%;" v-model="name1" />
          </Col>
          <Col span="10" offset="2">
            <span>性别：</span>
            <Input style="width: 70%;" v-model="sex" />
          </Col>
        </Row>
        <Row class="rowone">
          <Col span="10" offset="2">
            <span>民族：</span>
            <Input style="width: 70%;" v-model="nation" />
          </Col>
          <Col span="10" offset="2">
            <span style="margin-left: -22px;">身份证号：</span>
            <Input style="width: 70%;" v-model="idcard1" />
          </Col>
        </Row>
        <Row class="rowone">
          <Col span="10" offset="2" >
            <span style="margin-left: -22px;">联系电话：</span>
            <Input style="width: 70%;" v-model="phone" />
          </Col>
          <Col span="10" offset="2">
            <span style="margin-left: -22px;">转入时间：</span>
            <Input style="width: 70%;" v-model="time" />
          </Col>
        </Row>
        <Row class="rowone">
          <Col span="10" offset="2">
            <span style="margin-left: -58px;">工作单位及职务：</span>
            <Input style="width: 70%;" v-model="workpost" />
          </Col>
          <Col span="10" offset="2">
            <span style="margin-left: -34px;">现居住地址：</span>
            <Input style="width: 70%;" v-model="address" />
          </Col>
        </Row>
      </Modal>

      <Modal
        width="700px"
        v-model="modal2"
        title="编辑信息"
        @on-ok="ok1">
        <Row class="rowone">
          <Col span="10" offset="2">
            <span>姓名：</span>
            <Input style="width: 70%;" v-model="name1" />
          </Col>
          <Col span="10" offset="2">
            <span>性别：</span>
            <Input style="width: 70%;" v-model="sex" />
          </Col>
        </Row>
        <Row class="rowone">
          <Col span="10" offset="2">
            <span>民族：</span>
            <Input style="width: 70%;" v-model="nation" />
          </Col>
          <Col span="10" offset="2">
            <span style="margin-left: -22px;">身份证号：</span>
            <Input style="width: 70%;" v-model="idcard1" />
          </Col>
        </Row>
        <Row class="rowone">
          <Col span="10" offset="2" >
            <span style="margin-left: -22px;">联系电话：</span>
            <Input style="width: 70%;" v-model="phone" />
          </Col>
          <Col span="10" offset="2">
            <span style="margin-left: -22px;">转入时间：</span>
            <Input style="width: 70%;" v-model="time" />
          </Col>
        </Row>
        <Row class="rowone">
          <Col span="10" offset="2">
            <span style="margin-left: -58px;">工作单位及职务：</span>
            <Input style="width: 70%;" v-model="workpost" />
          </Col>
          <Col span="10" offset="2">
            <span style="margin-left: -34px;">现居住地址：</span>
            <Input style="width: 70%;" v-model="address" />
          </Col>
        </Row>
      </Modal>
    </div>
</template>

<script>
export default {
  data () {
    return {
      modal1: false,
      modal2: false,
      name: '',
      name1: '',
      sex: '',
      nation: '',
      idcard: '',
      idcard1: '',
      phone: '',
      time: '',
      workpost: '',
      address: '',
      columns12: [
        {
          title: '序号',
          type: 'index',
          width: 100
        },
        /*        {
          title: '编号',
          key: 'num'
        }, */
        {
          title: '姓名',
          key: 'name'
        },
        {
          title: '性别',
          key: 'sex'
        },
        {
          title: '民族',
          key: 'nation'
        },
        {
          title: '身份证号',
          key: 'idcard'
        },
        {
          title: '操作',
          slot: 'action',
          width: 250,
          align: 'center'
        }
      ],
      data1: [],
      data2: [],
      data0: {},
      data6: [
        {
          num: '1',
          name: '孙丽',
          sex: '女',
          nation: '汉',
          idcard: '210404199903031569',
          workpost: '和平区派出所民警',
          phone: '15898561234',
          time: '2011-01-22',
          address: '沈阳市和平区延边路派出所对面'
        },
        {
          num: '2',
          name: '张伟',
          sex: '男',
          nation: '汉',
          idcard: '210404196602051235',
          workpost: '顺丰快递派送员',
          phone: '13056196363',
          time: '2015-06-16',
          address: '沈阳市浑南区'
        },
        {
          num: '3',
          name: '赵国斌 ',
          sex: '男',
          nation: '汉',
          idcard: '210404198806245638',
          workpost: '沈阳市京东物流公司',
          phone: '15941355896',
          time: '2017-11-10',
          address: '沈阳市大东区'
        },
        {
          num: '4',
          name: '钱礼强',
          sex: '男',
          nation: '汉',
          idcard: '210404199010230202',
          workpost: '沈阳市和平区建设银行经理',
          phone: '15898366666',
          time: '2018-09-30',
          address: '沈阳市和平区'
        },
        {
          num: '5',
          name: '褚英',
          sex: '女',
          nation: '汉',
          idcard: '210404199010233698',
          workpost: '沈阳市和平区中国银行经理',
          phone: '15898366687',
          time: '2018-08-30',
          address: '沈阳市沈北新区'
        },
        {
          num: '6',
          name: '蒋先森',
          sex: '男',
          nation: '汉',
          idcard: '210404199010231478',
          workpost: '沈阳市和平区交通银行经理',
          phone: '15898366603',
          time: '2018-07-30',
          address: '沈阳市于洪区'
        },
        {
          num: '7',
          name: '沈浪',
          sex: '男',
          nation: '汉',
          idcard: '210404199410231478',
          workpost: '沈阳市和平区工商银行经理',
          phone: '15898341239',
          time: '2018-06-30',
          address: '沈阳市铁西区'
        },
        {
          num: '8',
          name: '孙丽丽',
          sex: '女',
          nation: '汉',
          idcard: '210404199801203687',
          workpost: '沈阳市和平区中信银行经理',
          phone: '15898340303',
          time: '2018-05-30',
          address: '沈阳市铁西区'
        }
      ]
    }
  },
  methods: {
    ok1 () {
      this.data0.name = this.name1
      this.data0.sex = this.sex
      this.data0.nation = this.nation
      this.data0.idcard = this.idcard1
      this.data0.workpost = this.workpost
      this.data0.phone = this.phone
      this.data0.time = this.time
      this.data0.address = this.address
    },
    bianji (row) {
      this.data0 = row
      this.modal2 = true
      this.name1 = row.name
      this.sex = row.sex
      this.nation = row.nation
      this.idcard1 = row.idcard
      this.workpost = row.workpost
      this.phone = row.phone
      this.time = row.time
      this.address = row.address
    },
    kai () {
      this.modal1 = true
      this.name1 = ''
      this.sex = ''
      this.nation = ''
      this.idcard1 = ''
      this.workpost = ''
      this.phone = ''
      this.time = ''
      this.address = ''
    },
    ok () {
      let a = { name: this.name1,
        sex: this.sex,
        nation: this.nation,
        idcard: this.idcard1,
        workpost: this.workpost,
        phone: this.phone,
        time: this.time,
        address: this.address
      }
      this.data2.push(a)
    },
    select () {
      this.data1 = []
      this.data6 = this.data2
      if (this.name !== undefined && this.name !== '') {
        this.data6.filter(item => {
          if (item.name.indexOf(this.name) !== -1) {
            this.data1.push(item)
          }
          this.data6 = this.data1
        })
      } else if (this.idcard !== undefined && this.idcard !== '') {
        this.data6.filter(item => {
          if (item.idcard.indexOf(this.idcard) !== -1) {
            this.data1.push(item)
          }
          this.data6 = this.data1
        })
      } else if ((this.name !== undefined && this.name !== '') && (this.idcard !== undefined && this.idcard !== '')) {
        this.data6.filter(item => {
          if (item.name === this.name || item.idcard === this.idcard) {
            this.data1.push(item)
          }
          this.data6 = this.data1
        })
      } else {
        this.data6 = this.data2
      }
    },
    show (index) {
      this.$Modal.info({
        title: '详细信息',
        content: `姓名：${this.data6[index].name}<br>性别：${this.data6[index].sex}<br>民族：${this.data6[index].nation}<br>
        身份证号：${this.data6[index].idcard}<br>工作单位及职务：${this.data6[index].workpost}<br>电话：${this.data6[index].phone}<br>
        入职时间：${this.data6[index].time}<br>现居住地址：${this.data6[index].address}<br>`
      })
    },
    remove (index) {
      this.data6.splice(index, 1)
      // this.data2.splice(index, 1)
    }
  },
  mounted () {
    this.data2 = this.data6
  }

}
</script>

<style scoped>
  .rowone{
    padding: 10px;
  }
</style>
